<script setup lang="ts">
import {MyTab} from "@/interfaces/apiResponse.ts";
const props = defineProps<{
    tabs:MyTab[]
}>()
const route = useRoute();
const router = useRouter();
const active = ref('name'+props.tabs?.findIndex(tab=>tab?.routeName == route.name));
const tabs = computed(()=>{
  return props.tabs.filter(tab=>{
      return tab?.switchShow ? tab?.routeName == route.name : true;
  })
})
const change = (pane:any)=>{
  const tab = props.tabs[pane['index']];
  if(tab?.event) tab.event();
  if(tab?.routeName) router.push({name:tab.routeName});
}
</script>

<template>
  <el-tabs v-model="active" class="demo-tabs" @tab-click="change">
    <el-tab-pane :label="tab.label" :name="`name${index}`" v-for="(tab,index) in tabs" :key="index"></el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>

</style>